<template>
  <div class="login">
    <el-container class="login">
    <el-aside width="355px"></el-aside>
    <el-container>
        <el-header>
            <div style="height:200px">
                <img class="loginImg" src="..\assets\imgs\logo.png" alt="">
                <span class="loginFont">黑鹰商城</span>
                <ul class="leftLogin">
                    <a href="">用户协议</a>
                    <a href="">隐私政策</a>
                    <a href="">帮助中心</a>
                </ul>
            </div>
        </el-header>
        <el-main>
            <div class="mainLogin">
                <div>
                    <div @click="setLogin">登录</div>
                    <div @click="setRegister">注册</div>
                </div>
                    <el-form v-if="isLogin" ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="rules" >
                        <el-form-item prop="username">
                            <el-input  prefix-icon="iconfont iconuser" v-model="loginForm.username " placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input  prefix-icon="iconfont iconsuo" type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item class="btns">
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-button type="info" @click="resetBtn">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form v-else ref="registerFormRef" label-width="0px" class="register_form" :model="registerForm" :rules="rules" >
                        <el-form-item prop="username">
                            <el-input  prefix-icon="iconfont iconuser" v-model="registerForm.username " placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input  prefix-icon="iconfont iconsuo" type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                          <el-form-item
                            prop="phone"
                            :rules="[
                            { required: true, message: '手机号不能为空'},
                            { type: 'number', message: '手机号必须为数字值'}
                            ]"
                        >
                            <el-input type="phone" v-model="registerForm.phone" placeholder="请输入电话"></el-input>
                        </el-form-item>
                        <el-form-item class="btns">
                            <el-button type="primary" @click="register">注册</el-button>
                            <el-button type="info" @click="resetBtn">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
        </el-main>
        <el-footer>
            <div style="text-align: center;font-size: 10px;color:#9b9ea0;">即使人类心中永远无法磨灭掉黑暗，我还是相信，凭着自己的力量，人类一定可以为自己带来光明的！</div>
        </el-footer>
    </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    name: 'Login',
    data(){
        return{
            radio1:'登录',
            isLogin: true,
            registerForm:{
                username: '',
                password: '',
                phone:''
            },
            loginForm: {
                username: '',
                password: '',
                client_id: 'gateway-client',
                grant_type: 'password',
                client_secret: '123456'
            },
            rules: {
            //定义校验用户名
            username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
            ],
            //定义校验密码
            password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
            ]
            }
        }
    },
    methods:{
        setLogin(){
            if(this.isLogin===false){
                this.isLogin = true
                console.log(this.isLogin);
            }
        },
        setRegister(){
            if(this.isLogin===true){
                this.isLogin=false
            }
        },
        registerSuccess() {
        this.$alert('注册成功', {
          confirmButtonText: '确定'
        });
      },
        register(){
            this.$axios.post('/api/user/register',this.registerForm)
            .then(res=>{
                if(res.data.status == 200){
                    this.registerSuccess()
                } 
            })
        },
        login(){
      //获取表单对象之后进行数据校验
      //valid 表示校验的结果 true表示通过  false表示失败
    //   this.$refs.loginFormRef.validate(async valid => {
    //      //如果没有完成校验则直接返回
    //      if(!valid) return
        let params = new URLSearchParams()
        params.append('username',this.loginForm.username)
        params.append('password',this.loginForm.username)
        params.append('client_id',this.loginForm.client_id)
        params.append('grant_type',this.loginForm.grant_type)
        params.append('client_secret',this.loginForm.client_secret)

         //如果校验成功,则发起ajax请求
        this.$axios.post('api/oauth/token',params)
        .then((res)=>{
        if(res.status !== 200)
        {return this.$alert('登录失败,请重新登录或注册', {
          confirmButtonText: '确定'
        });}
        if(res.status === 200){
        this.$message({
            message: '登录成功,跳转首页',
            type: 'success'
        });
        //获取用户token信息并储存
        let token = res.data.access_token
        localStorage.setItem('accessToken',token)
        // console.log(localStorage.getItem('accessToken'));
        //用户登录成功之后,跳转到home页面
        this.$router.push('/')
        }}).catch((err) =>{
            return Promise.reject(err)
        })     
      }
    }
    }
</script>

<style scoped>
.login_form{
    margin: auto;
    width: 250px;
}
.register_form{
    margin: auto;
    width: 250px;
}
.mainLogin{
    padding-top: 100px;
    background-color: rgb(233, 240, 240);
    margin: 100px auto;
    width: 400px;
    height: 400px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.leftLogin a{
    color:#9b9ea0;
}
.leftLogin a:hover{
    color: rgb(233, 87, 19);
}
.leftLogin{
    text-decoration:none;
    font-weight:bold;
    font-size: 10px;
    width: 15%;
    display: flex;
    justify-content:space-evenly;
    float: right;
    margin: 40px 40px;
}
.loginFont{
    font-size: 20px;
    margin-top:30px;
    margin-left: -10px;
    font-weight: 800;
    position: absolute;
}
.login{
    position:fixed;
    height:100%;
    width: 100%;
}
.loginImg{
    height: 60px;
    width: 60px;
    border-radius: 20px;
    margin: 10px 20px;
}
  .el-main {
    color: #333;
    text-align: center;
    height: 800px;
  }
  .el-header, .el-footer {

    color: #333;
  }
    .el-aside {
    box-sizing:border-box;
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 100%;
    background-image: url('../assets/imgs/banner.4994397e.jpg');
    background-size: cover;
  }
</style>